<template>
  <div class="dy-main prerecordMain">
    <div class="dy-header">
      <x-header title="开户预录" :left-options="{preventGoBack:true}" @on-click-back="back"></x-header>
    </div>
    <div class="dy-body">
      <group gutter="0.05rem">
        <x-input title="客户姓名" placeholder="请输入客户姓名" v-model="requestData.clientName" label-width="2.05rem" text-align="right" :show-clear="false" class="cell imgInInput">
          <img class="imgCamera" slot="right" src="../../assets/img/PreRecord/scan.png" alt="" >
        </x-input>
        <x-input title="证件号码" placeholder="请输入证件号码" label-width="2.05rem" v-model="requestData.IDNo" text-align="right" class="cell"></x-input>
        <datetime v-model="requestData.validity" :display-format="validityFunction" @on-change="change" title="有效期" placeholder="请选择到期日期" class="cell" format="YYYY-MM-DD"></datetime>
        <cell title="长期有效" :value="requestData.validFlag" class="cell">
          <zx-radio :data="['']" @on-chang="radioChange"></zx-radio>
        </cell>
        <x-input title="手机号码" placeholder="请输入手机号" label-width="2.05rem" v-model="requestData.mobile" text-align="right" class="cell"></x-input>
        <x-input title="电子邮箱" placeholder="请输入电子邮箱" label-width="2.05rem" v-model="requestData.email" text-align="right" class="cell"></x-input>
        <popup-picker title="受雇行业" :data="business" v-model="requestData.vocation" placeholder="请选择" class="cell"></popup-picker>
        <popup-picker title="职业" :data="career" v-model="requestData.occupation" placeholder="请选择" class="cell"></popup-picker>
        <x-input title="开户通讯地址" placeholder="请输入开户通讯地址" label-width="2.05rem" v-model="requestData.address" text-align="right" class="cell"></x-input>
        <x-input title="通讯邮件编码" placeholder="请输入通讯邮件编码" label-width="2.05rem" v-model="requestData.zipCode" text-align="right" class="cell"></x-input>
        <x-input title="开户原因" placeholder="请输入开户原因" label-width="2.05rem" v-model="requestData.comment" text-align="right" class="cell"></x-input>
        <x-input title="账户资金来源" placeholder="请输入账户资金来源" label-width="2.05rem" v-model="requestData.capitalResouce" text-align="right" class="cell"></x-input>
        <cell title="是否开通动账通知" :value="requestData.noticeFlag" class="cell">
          <zx-radio :data="['是', '否']" @on-chang="noticeFlagChange"></zx-radio>
        </cell>
        <cell title="是否开通手机银行" :value="requestData.mobileFlag" class="cell">
          <zx-radio :data="['是', '否']" @on-chang="mobileFlagChange"></zx-radio>
        </cell>
        <cell title="是否开通网银" :value="requestData.ebankFlag" class="cell">
          <zx-radio :data="['是', '否']" @on-chang="ebankFlagChange"></zx-radio>
        </cell>
        <cell title="是否开通玩应大额转账服务" :value="requestData.largeAmtFlag" class="cell">
          <zx-radio :data="['是', '否']" @on-chang="largeAmtFlagChange"></zx-radio>
        </cell>
        <x-input title="推荐人编号" placeholder="请输入推荐人编号" label-width="2.05rem" v-model="requestData.employeeID" text-align="right" class="cell"></x-input>
      </group>
      <x-button type="warn" class="confirm" ction-type="button" @click.native="submit">提交</x-button>
      <zx-dialog v-model="chooseShow" title="预录入" type="success" butType="button" :data="['确认']" tipsmsg="提交成功" @on-click-yes="clickYes" v-if="submitStatus=='1'"></zx-dialog>
      <zx-dialog v-model="chooseShow" title="预录入" type="warn" butType="button" :data="['确认']" tipsmsg="提交失败" @on-click-yes="clickYes" v-if="submitStatus=='0'"></zx-dialog>
    </div>
    <!--<div class="dy-footer"></div>-->
  </div>
</template>
<script>
import { Actionsheet, Toast, Icon } from 'vux'
export default{
  components: {
    Actionsheet,
    Toast,
    Icon
  },
  data () {
    return {
      requestData: {
        clientName: '',
        IDNo: '', // 证件号码
        validity: '', // 输入日期
        validFlag: '0', // 长期有效
        mobile: '', // 手机号
        email: '', // 电子邮箱
        vocation: [], // 选择的受雇行业
        occupation: [], // 选择的职业
        address: '', // 通信地址
        zipCode: '', // 邮件编码
        comment: '', // 开户原因
        capitalResouce: '', // 资金来源
        noticeFlag: '0', // 是否开通动账通知
        mobileFlag: '0', // 是否开通手机银行
        ebankFlag: '0', // 是否开通网银
        largeAmtFlag: '0', // 是否开通大额
        employeeID: '' // 推荐人编号
      },
      submitStatus: '1', // 交互结果 1成功 0失败
      chooseShow: false, // 弹框状态
      business: [[ // 受雇行业
        '通信',
        '金融',
        '互联网',
        '建筑',
        '航空',
        '其他'
      ]],
      career: [[ // 职业
        '铁匠',
        '医生',
        '经理',
        '厨师',
        '司机',
        '其他'
      ]],
      validityFunction (val) { // 最终格式化日期
        let year = val.substr(0, 4)
        let month = val.substr(5, 2)
        let day = val.substr(8, 2)
        return year + '年' + month + '月' + day + '日'
      }
    }
  },
  methods: {
    back () {
      this.$publicFun.goBack(this)
    },
    clickYes () { // 弹框确定
      this.chooseShow = false
      this.requestData = {
        clientName: '',
        IDNo: '', // 证件号码
        validity: '', // 输入日期
        validFlag: '0', // 长期有效
        mobile: '', // 手机号
        email: '', // 电子邮箱
        vocation: [], // 选择的受雇行业
        occupation: [], // 选择的职业
        address: '', // 通信地址
        zipCode: '', // 邮件编码
        comment: '', // 开户原因
        capitalResouce: '', // 资金来源
        noticeFlag: '0', // 是否开通动账通知
        mobileFlag: '0', // 是否开通手机银行
        ebankFlag: '0', // 是否开通网银
        largeAmtFlag: '0', // 是否开通大额
        employeeID: '' // 推荐人编号
      }
    },
    validityFormat (val) { // 提交给后台的日期格式化
      let year = val.substr(0, 4)
      let month = val.substr(5, 2)
      let day = val.substr(8, 2)
      return year + month + day
    },
    submit () { // 提交按钮
      let _this = this
      // 提交给后台的日期格式化
      _this.requestData.validit = _this.validityFormat(_this.requestData.validity)
      this.$bridge.callhandler('nativeRequest',
        JSON.stringify({
          'requstSource': 'internetRequest',
          'url': 'http://whichat.icitic.net/mstep/mstep.do?act=business',
          'params': {'method_Name': 'CI004003_7', 'user_Data': _this.requestData}
        }),
        function (response) {
          response = JSON.parse(response)
          if (response.status === 0 || response.status === '0') {
            let returnData = response.data
            if (returnData.status === '0') {
              _this.submitStatus = '1'
              _this.chooseShow = true
            } else {
              // todo 失败的展示
              _this.submitStatus = '0'
              _this.chooseShow = true
            }
          } else {
            console.log('fail')
          }
        })
    },
    change (value) { // 日期选择
      console.log('change', value)
    },
    radioChange (val) { // 有效期点击
      val = ''
      this.requestData.validFlag = '1'
    },
    noticeFlagChange (val) { // 下方通知
      if (val === '是') {
        this.requestData.noticeFlag = '1'
      }
      if (val === '否') {
        this.requestData.noticeFlag = '0'
      }
    },
    mobileFlagChange (val) { // 下方通知
      if (val === '是') {
        this.requestData.mobileFlag = '1'
      }
      if (val === '否') {
        this.requestData.mobileFlag = '0'
      }
    },
    ebankFlagChange (val) { // 下方通知
      if (val === '是') {
        this.requestData.ebankFlag = '1'
      }
      if (val === '否') {
        this.requestData.ebankFlag = '0'
      }
    },
    largeAmtFlagChange (val) { // 下方通知
      if (val === '是') {
        this.requestData.largeAmtFlag = '1'
      }
      if (val === '否') {
        this.requestData.largeAmtFlag = '0'
      }
    }
  }
}
</script>
<style lang="less">
  .prerecordMain {
    .dy-body{
      overflow: auto;
      .confirm {
        background-color: #ec1b30;
        width: 6.9rem;
        height: .88rem;
        margin-top: .64rem;
        margin-bottom: 2.4rem;
        font-size: .34rem;
      }
      .imgCamera {
        width: .42rem;
        height: .42rem;
        margin-left: .24rem;
        vertical-align: middle;
      }
      /*复选框*/
      .zx-radio > .radio i {
        margin-bottom: .05rem;
      }
      .imgInInput::-ms-clear {
        display: none;
      }
    }
  }
</style>
